<template>
    <div class="yybox four-cornor-wrapper" style="background:#fff;">
      <i class="l"></i>
      <i class="r"></i>
      <i class="t"></i>
      <i class="b"></i>
      <!-- main -->
      <h2 class="common-title">
        <span class="main">母婴常识</span>
      </h2>
      <!-- product-list -->
      <div v-if ="infoArr.length > 0">
        <ul class="product-list">
          <li class="product-list-item" v-for="(v, i) in infoArr" :key="i" @click="viewProduct(v)">
            <div class="product-img"><img :src="v.image" /></div>
            <div class="product-title">
              <div class="topTitle">
                {{v.title}}
              </div>
              <p class="content">
                {{v.intro}}

              </p>
              <p class="pTime">
                发布日期: {{v.time}}
              </p>
            </div>
          </li>
        </ul>
        <!-- <div class="clearfix mt20" >
          <div class=" fr">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="params.pagenum"
              :page-sizes="[12, 24, 36, 48]"
              :page-size="params.pagesize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total">
            </el-pagination>
          </div>
        </div> -->
      </div>
      <div class="no-data" v-else>暂无数据</div>
      <!-- end product list -->
    </div>
</template>
<script>
export default {
  data () {
    return {
      params: {
        areaId: 403890,
        // gcId: '',
        // gcId1: '',
        keyWord: '',
        orderId: 10,
        pagenum: 1,
        pagesize: 12,
        appCode: 'resident'
      },
      products: [],
      total: 0,
      infoArr: [
        {id:61,title: '爱美甲的女孩注意 会引起流产或畸胎', time: '2018-12-17', image: require('../../assets/info/mother1.jpg'), intro:"指甲油中有一种化学物质叫邻苯二甲酸酯，且含量很高，它主要起到软化作用。这种物质会通过呼吸系统和皮肤进入人体，如果过多使用，会增加女性患乳腺癌的几率。", topContent: '<p><span>&nbsp; &nbsp; 药品容易受到光线、温度、湿度、微生物的影响与破坏。如药品存放不当，或存放过久，会使药品质量下降或变质无效，用这样的药品会造成不良后果。</span></p>', content: `1.水晶甲生出霉花<br>水晶美甲时下非常流行，就是在原有的指甲上再接一段，采用立体三维镶嵌甲的方式“镶钻”。水晶粉的质地有好有坏，如果采用透气性差的水晶粉，美甲师技术又不太熟练的话，在指甲上形成的气泡和空隙就变成了细菌的温床，做了水晶甲之后的一段时间内，消费者的手指甲很容易发炎，轻则瘙痒，重则红肿，做过水晶甲很有可能生出霉花。<br>2.有致癌的危险<br>指甲油中有一种化学物质叫邻苯二甲酸酯，且含量很高，它主要起到软化作用。这种物质会通过呼吸系统和皮肤进入人体，如果过多使用，会增加女性患乳腺癌的几率。<br>3.可致流产和畸胎<br>警惕指甲油可致胎儿畸形。指甲油中普遍含有一种叫“酞酸酯”的物质，这种物质很可能导致胎儿畸形和流产。酞酸酯是一种无色无味的油状液体，挥发性好，能够使指甲油质地更均匀、耐用。<br>它可通过皮肤、呼吸道及消化道进入人体，积蓄在脂肪组织，不易排泄。如果人体内此物质的残留浓度高，会危害肝、肾、心血管和生殖系统，影响人体内分泌功能。孕妇长期使用后可致胎儿生殖器畸形。<br>4.感染甲沟炎<br>美甲的第一个步骤通常是去指甲小皮、锉指甲，除掉或推后顾客指甲上的小皮，也就是将指甲上靠近月白处、蒙在指甲上的皮肤锉薄，甚至去除，这对于指甲本身是一个伤害。<br>很多喜欢美甲的女士有这样的发现：做了几次美甲后，欲罢不能。因为自己的真指甲已经变得“面目可憎”。逐渐变厚的指甲，只能不断锉薄，以维持“形象”。<br>此外，频频美甲，还会导致指甲颜色变暗、变灰，这时只好通过厚厚的指甲油来掩盖。<br>5.频繁美甲易得灰指甲<br>因为频繁美甲，患上灰指甲的人多得很!每到夏秋美甲高峰季节，每天接诊灰指甲患者就有十多名，有时还出现排队等候的场面。其实指甲有一层指甲表膜，它是皮肤的一部分，具有呼吸和保护作用。<br>如果经常涂指甲油，指甲无法“呼吸”。另外，美甲时，要磨掉指甲表膜，其表面及皮肤等都要受损，一旦指甲发生病变，病毒真菌等就会趁虚而入，引起病变。<br>6.容易传染手癣、灰指甲、甲沟炎、肝炎等疾病<br>美甲用具的卫生问题是一大健康隐患。某些购物广场等美甲店集中的地方，常常是100米的过道上十几家小店排排坐。小店给顾客提供的美甲用具不洁。<br>使用的毛巾、镊子、剪子等用具，根本不能做到“一客一换一消毒”；操作场所及美甲用具没有经过消毒，卫生不达标。`},
        {id:62,title: '孕妇剖腹产后的六大注意 饮食要富含蛋白质', time: '2018-12-13', image: require('../../assets/info/mother2.jpg'), intro:"在导尿管拔出后，产妇如有便意，要及时大小便，即使腹部疼痛，建议慢慢大小便，不要太用力。如不能及时大小便会引起尿路细菌感染的危险和大便秘结。", topContent: '<p>&nbsp;<span>&nbsp; &nbsp; 人体自然的生物节律就犹如心脏跳动一样重要，体内无一器官没有各自的节律，节律消失就意味着人体的死亡。医生和药物学家认识到，按一定的时间表服用药物，可以收到更好的药用效果。下面将部分药品服用的最佳时间介绍如下。</span></p>', content: `1、及时大小便<br>在导尿管拔出后，产妇如有便意，要及时大小便，即使腹部疼痛，建议慢慢大小便，不要太用力。如不能及时大小便会引起尿路细菌感染的危险和大便秘结。<br>孕妇剖腹产后要注意哪些 孕妇剖腹产后要如何<a href=http://www.yswang.net/yinshi/ target=_blank class=infotextkey>饮食</a> 剖腹产后的护理<br>2、少用止痛药物<br>剖腹产术之后，随着药效的逐渐消失，伤口的疼痛感会越来越明显，手术当天医生会给药止痛，可接下来的几天里，最好还是要少用止痛药，因为吃止痛药会影响肠蠕动功能的恢复。<br>3、卧床要半卧位<br>顺产的产妇可在24小时后就可以下床活动，但是剖腹产的产妇身体恢复比较慢，会出现恶露不容易排出的情况，所以说应采取半卧位，使恶露容易排出，有利于子宫恢复和伤口愈合。<br>4、多翻身<br>剖腹产的产妇易发生腹胀的现象，所以产后要多翻身，让肠道里的气体尽快排出，可以减轻腹胀带来的不适感。<br>5、尽早下床活动<br>剖腹产的产妇是比较辛苦的，产后恢复比较慢，身体比较虚弱，建议多休养。如若身体恢复得较好，尿导管也已拔出，腹部疼痛感较轻，可经得医生同意尽早下床活动，这样可以避免肠粘连及血栓性静脉炎形成，还能促进下肢血液循环，使身体恢复得更快。<br>孕妇剖腹产后要注意哪些 孕妇剖腹产后要如何饮食 剖腹产后的护理<br>6、身体清洗要科学<br>剖腹产的的伤口在二周内切记不能沾湿，如要清洗也是擦浴，产妇在这擦身过程要注意保暖，不可着凉。恶露未排净之前是禁止坐浴，外阴也要一天一洗。如有伤口有特殊情况，应及时就诊。<br>给剖腹产后的准妈妈准备饮食时，要把握以下5个要点：<br>1、饮食要富含蛋白质<br>应比平时多吃蛋白质，尤其是动物蛋白。比如鸡、鱼、瘦肉、动物肝、血。豆类也是必不可少的佳品，但无须过量，那样会加重肝肾负担，反而对身体不利，每天摄入95克即可。<br>2、主食种类多样化<br>粗粮和细粮都要吃。比如小米、玉米粉、糙米、标准粉，它们所含的V都要比精米精面高出好几倍。<br>孕妇剖腹产后要注意哪些 孕妇剖腹产后要如何饮食 剖腹产后的护理<br>3、多吃蔬菜和水果<br>既可提供丰富的维生素、矿物质，又可提供足量的膳食纤维素，以防产后发生便秘。<br>4、多进各种汤饮<br>汤类味道鲜美，且易消化吸收，还可以促进乳汁分泌。如红糖水、鲫鱼汤、猪蹄汤、排骨汤等，但须汤肉同吃。红糖水的饮用时间不能超过10天，因为时间过长反而使恶露中的血量增加，使妈妈处于一个慢性失血过程而发生贫血。但是，汤饮的进量要适度，以防引起妈妈奶胀。<br>5、不吃酸辣食物及少吃甜食<br>酸辣食物会刺激妈妈虚弱的胃肠而引起诸多不适;过多吃甜食不仅会影响食欲，还可能使热量过剩而转化为脂肪，引起身体肥胖。`},
        {id:63,title: '宝宝久了会咳成肺炎，医生：这5种咳声一定要注意', time: '2018-12-07', image: require('../../assets/info/mother3.jpg'), intro:"屋外雨水滴滴哒哒，屋里宝宝咳咳咳的，爸妈觉得超级烦躁：再这么咳下去，宝宝会不会咳成肺炎？好吧，这是宝宝咳嗽后，爸妈最担心的问题，其实也就是咳嗽和肺炎到底是个啥关系。看完这篇，爸妈就明白了。?", topContent: '<p><span>&nbsp; &nbsp; 临床表现皮疹多发生于颜面，尤其是颊、额、鼻旁等，皮疹炎症明显，或有口臭口干，脓疱，尿黄便结，苔黄，舌质红，脉数。此时，可以服用清胃黄连丸，能起到很好的疗效。那么，清胃黄连丸不良反应是什么?可以长期用吗?</span></p>', content: `咳嗽不是病<br>咳嗽并不是一种疾病，而是一种呼吸道的常见症状，能帮助清除气道内的分泌物或异物。所以，爸妈首先确定的是，宝宝为啥会引咳嗽？<br>病毒？细菌？过敏？异物？都有可能。<br>就这么来看，咳嗽多半是宝宝生病的表现，还可以分为干咳和湿咳（有痰的咳嗽）。<br>当气管、支气管黏膜或胸膜，受到炎症、异物、物理或化学性刺激时，咳嗽机制就启动了：声门关闭、呼吸肌收缩、肺内压升高，然后声门张开，肺内空气喷射而出，通常伴随声音，这声音，就是传说中的咳嗽。<br>虽说咳嗽是人体的一种自我防御机制，但咳咳咳咳个不停，从急性咳嗽转为慢性咳嗽的话，宝宝就容易气短胸闷、喉咙痒痒等各种不舒服。<br>那咳嗽跟肺炎到底是个啥关系？<br>一句话版本：肺炎可能会引起咳嗽的症状；但咳嗽不等于肺炎。<br>具体展开就是，咳嗽是症状，肺炎是疾病。呼吸道的任何部位的炎症，都会出现发热、咳嗽等症状。<br>真要让肺炎背锅，除非医生检查后确认宝宝的这种发热、咳嗽是肺炎导致的。<br>所以，爸妈千万别因为宝宝咳个不停怕咳出肺炎，就擅自用药甚至滥用药。<br>先祛痰再止咳：<br>嗯，咳嗽基本不是肺炎引起的，但也有少部分情况，确实会形成肺炎：<br>那就是宝宝有痰咳嗽的初期，爸妈一味止咳，忽略了痰的话，或者是把处理两者的先后顺序搞反了，一顿操作猛如虎，结果……<br>呀，咳嗽怎么反扑得更厉害了，不是之前明明被压制住了吗？<br>那只是暂时缓解，痰一丁点儿都没少呢——病菌会在痰里快速繁殖，趁着爸妈收拾咳嗽的功夫，病菌有了缓冲的时间，壮大队伍后，得寸进尺感染到了肺，形成新的感染甚至肺炎。<br>好了，爸妈担心的“咳出肺炎”终于发生了。`}
      ]
    }
  },
  filters: {
    fixed (val) {
      return val.toFixed(2)
    }
  },
  mounted () {
    // this.getProducts()
  },
  methods: {
    handleSizeChange (val) {
      this.params.pagesize = val
      this.getProducts()
    },
    handleCurrentChange (val) {
      this.params.pagenum = val
      this.getProducts()
    },
    viewProduct (i) {
      sessionStorage.setItem('curInfo', JSON.stringify(i))
      this.$router.push('/info/detail')
    },
    searchHandle (val) {
      this.params.keyWord = val
      this.getProducts()
    },
    getProducts () {
      this.$store.commit('UPDATE_LOADING')
      commonAjax(['app/shop/goods/list', this.params], `${PLATFORM_PREFIX}.shoppingMallService`, 'doPost').then(res => {
        this.$store.commit('UPDATE_LOADING')
        if (res.data.code === 200) {
          let body = JSON.parse(res.data.body)
          if (body.data.total > 0) {
            console.log(body.data.goods)
            this.total = body.data.total
            this.products = body.data.goods
          } else {
            this.products = []
          }
        }
      })
    },
    orderProduct () {
      if (this.params.orderId === 10) {
        this.params.orderId = 11
      } else {
        this.params.orderId = 10
      }
      this.getProducts()
    },
    priceProduct () {
      if (this.params.orderId === 20) {
        this.params.orderId = 21
      } else {
        this.params.orderId = 20
      }
      this.getProducts()
    }
  }
}
</script>

<style lang="less" scoped>
@import '../../common/css/vars.less';
.common-title {
  padding: 20px;
  border-bottom: 2px solid #FCF6F2;
  overflow: hidden;
  .main {
    float: left;
    color: @color-primary;
    font-size: 1.2em;
  }
  .sub {
    float: left;
    margin-left: 80px;
    margin-top: 12px;
    color: #666;
    font-size: 14px;
    .iconfont {font-size: 12px;}
    dt , dd{float: left;margin-left: 20px;cursor: pointer;}
  }
}
.product-list{
  overflow: hidden;
  padding: 20px;
  >.product-list-item {
    position: relative;
    float: left;
    width: 100%;
    margin-bottom: 20px;
    border: 1px solid @color-border;
    padding: 10px;
    transition: all .5s;
    cursor: pointer;
    overflow: hidden;
    &:hover{
      border-color: #EAD0C3;
      box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
    }
    .product-img{
      width: 200px;
      height: 160px;
      float: left;
      margin-right: 20px;
      position: relative;
    }
    .product-img > img {
      width: 80%;
      // height:100%;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%,-50%);
    }
    .product-title {
      width: 760px;
      float: left;
      .topTitle{
        width: 100%;
        line-height: 2;
        font-size: 16px;
      }
      .content{
        width: 100%;
        line-height: 1.5;
        font-size: 14px;
        color:#666;
      }
      .pTime{
        margin-top: 30px;
        color:#666;
        font-size: 12px;
      }
    }
  }
}
</style>
